<template>
  <el-drawer
      header="修改租户"
      direction="rtl"
      size="50%"
      @opened="initTenantInfo"
      @closed="closeAction"
      v-model="store.tenantEditOpen"
  >
    <template #header="{ close, titleId, titleClass }">
      <el-page-header  @click="store.setTenantEditOpen(false)">
        <template #icon>
            <ArrowLeft/>
        </template>
        <template #content>
          <span class="drawer-title font-100 mr-3" > 编辑租户 </span>
        </template>
      </el-page-header>
    </template>
    <el-descriptions title="租户信息"   direction="vertical"   :column="4" border v-loading="loading">
      <template #extra>
        <el-button type="primary" class="el-button__primary" v-if="!isCanEdit"  @click="isCanEdit=true">
          <template #icon>
            <Edit/>
          </template>
          修改信息
        </el-button>
        <el-button class="el-button__default" v-if="isCanEdit" @click="initTenantInfo">
          <template #icon>
            <Refresh/>
          </template>
          重置信息
        </el-button>
        <el-button type="primary" class="el-button__plain" v-if="isCanEdit"  @click="isCanEdit=false">
          <template #icon>
            <CircleClose/>
          </template>
          取消修改
        </el-button>
        <el-button type="primary" class="el-button__primary" v-if="isCanEdit"  @click="updateTenantInfo">
          <template #icon>
            <Check/>
          </template>
          提交修改
        </el-button>
      </template>
      <el-descriptions-item  :span="2">
        <template #label>
          <div class="cell-item"><svg-icon icon-class="num" />租户编号 </div>
        </template>
        <el-input  v-model="tenantInfo.tenantId" disabled class="no-border" />
      </el-descriptions-item>
      <el-descriptions-item  :span="2">
        <template #label>
          <div class="cell-item"><svg-icon icon-class="company" />租户名称 </div>
        </template>
        <el-input v-model="tenantInfo.tenantName" disabled  class="no-border" />
      </el-descriptions-item>
      <el-descriptions-item label="租户地址" :span="4">
        <template #label>
          <div class="cell-item"><svg-icon icon-class="international" />租户地址 </div>
        </template>
        <el-input v-model="tenantInfo.address" type="textarea" :autosize="{ minRows: 1, maxRows: 1 }" :disabled="!isCanEdit" class="no-border" />
      </el-descriptions-item>
      <el-descriptions-item label="统一社会信用代码"  :span="1">
        <template #label>
          <div class="cell-item"><svg-icon icon-class="education" />统一社会信用代码 </div>
        </template>
        <el-input v-model="tenantInfo.licenseNumber"  :disabled="!isCanEdit" class="no-border" />
      </el-descriptions-item>
      <el-descriptions-item label="联系人"  :span="1">
        <template #label>
          <div class="cell-item"><svg-icon icon-class="user" />联系人 </div>
        </template>
        <el-input v-model="tenantInfo.contactUserName" :disabled="!isCanEdit"  class="no-border" />
      </el-descriptions-item>
      <el-descriptions-item label="联系电话">
        <template #label>
          <div class="cell-item"><svg-icon icon-class="phone" />联系电话 </div>
        </template>
        <el-input v-model="tenantInfo.contactPhone"  :disabled="!isCanEdit" class="no-border" />
      </el-descriptions-item>
      <el-descriptions-item label="租户状态">
        <template #label>
          <div class="cell-item"><svg-icon icon-class="online" />租户状态 </div>
        </template>
        <el-switch v-model="tenantInfo.status" inline-prompt  :active-value='0' :inactive-value="1" active-text="正常" inactive-text="停用" :before-change="returnFalse"  />
      </el-descriptions-item>
      <el-descriptions-item label="简介" >
        <template #label>
          <div class="cell-item"><svg-icon icon-class="message" />租户简介 </div>
        </template>
        <el-input v-model="tenantInfo.intro" :disabled="!isCanEdit" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" class="no-border" />
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>

</template>


<script setup lang="ts">
import {tenantStore} from "@/stores/tenant/tenantStore.ts";
import {ArrowLeft, Check, CircleClose, Edit, Refresh} from "@element-plus/icons-vue";
import {onMounted, reactive, ref, watch} from "vue";
import type {TenantPageVO} from "@/api/tenant/types.ts";
import {getTenantByTenantId, updateTenant} from "@/api/tenant";
import {ElMessage, ElMessageBox} from "element-plus";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {defineEmits} from 'vue'
const emit = defineEmits(['refresh'])
const store = tenantStore()
const isCanEdit = ref(false)
const tenantInfo=ref<TenantPageVO>({} as TenantPageVO)
const loading=ref(false)
const False=ref(false)
const returnFalse=()=>{
  return False.value
}

const initTenantInfo=async () => {
  loading.value=true
  const tenantId = store.tenantId
  if (tenantId) {
    const res = await getTenantByTenantId(tenantId)
    tenantInfo.value = res.data
    loading.value=false
  }else {
    ElMessage.error("租户信息不存在")
    loading.value=false
  }

}

/**
 * 修改租户信息
 */
const updateTenantInfo=async () => {
  //提示是否修改
 ElMessageBox.confirm('确定修改租户信息吗？', '提示', {
   app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
   confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
   const tenant = tenantInfo.value
   const res = await updateTenant(tenant)
   if (res.data) {
     ElMessage.success("修改成功")

     store.setTenantEditOpen(false)
     tenantInfo.value={} as TenantPageVO
     //重置信息
     store.setTenantId('')
     //调用父组件的方法
     emit('refresh')

   }
 }).catch(()=>{
 }).finally(()=>{
   closeAction()
 })

}

const  closeAction=()=>{
  isCanEdit.value=false
}

</script>

<style scoped>
.drawer-title,.el-page-header {
  font-size: 16px;
  font-weight: bold;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  padding: 0;
  .el-input__inner {
    cursor: default !important;
  }
}

:deep(.el-textarea__inner) {
  outline: none;
  border: none;
  resize: none;
  box-shadow: none;
  padding: 0;
}

.el-input{
  font-weight: bold!important;
}
:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #fff !important;
}
:deep(.el-textarea.is-disabled textarea) {
  background-color: #fff !important;
  box-shadow:none;
}
:deep(.el-descriptions__label){
  text-align: center!important;
  .svg-icon{
    margin-right: 5px;
  }
}
.cell-item{
  display: flex;
  align-items: center;
}
.el-descriptions__label{

}
</style>


